<template>
<!-- dialog-dict begin -->
<el-dialog
  width="460px"
  class="dialog-dict"
  :title="`${titleMap[status]}字典类型`"
  :close-on-click-modal="false"
  :visible.sync="dialogShow"
  @close="onHide()">
  <el-form
    ref="dialogForm"
    class="dialogForm"
    label-width="82px"
    size="small"
    :rules="rules"
    :model="dialogForm">
    <el-form-item v-show="false" prop="id">
      <el-input type="hidden" v-model="dialogForm.id"></el-input>
    </el-form-item>
    <el-form-item label="字典名称" prop="dictName">
      <el-input v-model.trim="dialogForm.dictName" placeholder="请输入字典名称" clearable></el-input>
    </el-form-item>
    <el-form-item label="字典类型" prop="dictType">
      <el-input v-model.trim="dialogForm.dictType" placeholder="请输入字典类型" clearable></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="dialogForm.status">
        <el-radio
          v-for="dict in dict.type.sys_normal_disable"
          :key="dict.value"
          :label="dict.value">{{ dict.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="字典备注" prop="remark">
      <el-input type="textarea" v-model.trim="dialogForm.remark" placeholder="请输入字典备注" clearable></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" :loading="dialogLoading" @click="dialogSubmit()">保 存</el-button>
    <el-button size="small" @click="dialogShow = false">取 消</el-button>
  </div>
</el-dialog>
<!-- dialog-dict end -->
</template>

<script>
import * as API_Dict_Type  from '@/api/system/dict/type';

export default {
  name: 'dialog-dict',
  dicts: ['sys_normal_disable'],
  props: {
    // 弹层显示
    show: {
      type: Boolean,
      default: false
    },
    // 弹层状态
    status: {
      type: String,
      default: 'new'
    },
    // 字典类型 ID
    id: {
      type: [String, Number],
      default: undefined
    }
  },
  data () {
    return {
      dialogShow: false,
      titleMap: {
        'new': '新增',
        'edit': '修改'
      },
      dialogForm: {
        id: undefined,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
        remark: undefined
      },
      rules: {
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'blur' }
        ],
        dictType: [
          { required: true, message: '字典类型不能为空', trigger: 'blur' }
        ]
      },
      // 弹层按钮加载中
      dialogLoading: false
    };
  },
  watch: {
    show (_newVal) {
      this.resetForm('dialogForm');
      if (_newVal) {
        if (this.status !== 'new') {
          this.getDetail();
        } else {
          this.dialogShow = _newVal;
        };
      } else {
        this.dialogShow = _newVal;
      };
    }
  },
  methods: {
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {关闭弹层}
    */
    onHide () {
      this.$emit('update:show', false);
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {获取字典类型详细信息}
    */
    getDetail () {
      API_Dict_Type.getDetailService(this.id).then(response => {
        let _useData = response.data || {};
        this.dialogShow = true;
        this.$nextTick(() => {
          this.dialogForm = _useData;
        });
      });
    },
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {信息弹层表单提交}
    */
    dialogSubmit () {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.dialogLoading = true;
          let _params = this.MixinClone(this.dialogForm);
          // 保存接口类型
          let _service = this.status === 'new' ? API_Dict_Type.addService : API_Dict_Type.updateService;
          _service(_params).then(response => {
            this.$msgSuccess(response.msg);
            this.$parent.search('selectPage');
            this.onHide();
          }).always(() => {
            this.dialogLoading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        };
      });
    }
  }
};
</script>